<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-size:30px;">技能列表</span>
      <el-button style="float: right; padding: 3px 0" type="text"
        >操作按钮</el-button
      >
    </div>
  <el-table
    :data="filterTableData.slice((currentPage-1) * pageSize,currentPage*pageSize)"
    :row-class-name="tableRowClassName"
    style="width: 100%"
  >
    <el-table-column prop="date" label="图像" width="200">
      <template slot-scope="scope">
        <el-avatar :size="60">
          <img
            v-bind:src="
              'https://game.gtimg.cn/images/yxzj/img201606/summoner/' +
              scope.row.summoner_id +
              '.jpg  '
            "
          />
        </el-avatar>
      </template>
    </el-table-column>
    <el-table-column prop="summoner_id" label="技能编号"> </el-table-column>
    <el-table-column prop="summoner_name" label="技能名称"> </el-table-column>
    <el-table-column prop="summoner_rank" label="技能解锁"> </el-table-column>
    <el-table-column prop="summoner_description" label="技能描述"></el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="searchContent" size="mini" placeholder="输入关键字搜索" />
      </template>
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-popconfirm
            @confirm = "handleDelete(scope.$index, scope.row)"
            confirm-button-text="确定"
            cancel-button-text="再想想"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除这行内容吗？"
          >
            <el-button
              slot="reference"
              size="mini"
              type="primary"
              >删除</el-button
            >
          </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" 
                  @current-change="handleCurrentChange"
                  @size-change = "handleSizeChange"
                  :page-count="pageCount"
                  :page-size="pageSize"
                  prev-text="上一页"
                  next-text="下一页"
                  :current-page="currentPage">
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      searchContent: "",
      currentPage:1,
      pageSize:5,
      pageCount:1
    };
  },
  created() {
    this.query();
  },
  computed: {
    //过滤数据 实现分页和搜索效果
    filterTableData:function() {
      let input = this.searchContent && this.searchContent.toLowerCase();
      let searchItems;
      //搜索 且有结果就返回一个结果数组
      if (input) {
        searchItems = this.tableData.filter(function(item) {
          return Object.keys(item).some(function(key1) {
            return String(item[key1])
              .toLowerCase()
              .match(input);
          });
        });
      } else {
        //不搜索 则返回整个表数据
        searchItems = this.tableData;
      }
      return searchItems;
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    },
    query() {
      fetch("http://47.241.102.141:3000/summoners")
        .then((response) => response.json())
        .then((data) => {
          this.tableData = data;
          this.pageCount = Math.ceil(this.tableData.length / this.pageSize);
          console.log(data);
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
        console.log(index, row);
        for(let i = 0;i < this.tableData.length;i++) {
            if(this.tableData[i].summoner_id == row.summoner_id) {
                this.tableData.splice(i,1);
                break;
            }
        }   
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange(pageSize) {
      this.currentPage = 1;
      this.pageSize = pageSize;
    }
  },
};
</script>



<style>
.el-table .warning-row {
  /* background: oldlace;
   */
  background-color: white;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table {
  width: 80%;
  margin: 0 auto;
}
</style>